<template>
  <div>
    <!-- 手机号登录 -->
    <div class="model">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        label-position="top"
        class="el_form"
        :rules="rules"
      >
        <el-form-item label="账号" prop="zh">
          <el-input v-model="form.zh">
            <template slot="prepend">+87</template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="mm" style="margin-bottom: 43px">
          <el-input v-model="form.mm" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: "获取验证码",
      title: this.$store.state.programName,
      form: {
        zh: "", //账号
        mm: "" //密码
      },
      rules: {
        zh: [{ required: true, message: "请填写账号", trigger: "blur" }],
        mm: [{ required: true, message: "请填写密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    login() {
      const formData = new FormData();
      for (let i in this.form) {
        formData.append(i, this.form[i]);
      }
      this.$http
        .post(this.$baseUrl.login, formData)
        .then(res => {
          if (res.data[0].pop == "0") {
            this.$message.success(res.data[0].log);
            const data = {
              zh: this.form.zh,
              ...res.data[0]
            };
            this.$store.commit("set_userInfo", data);
            this.$router.push({ path: "/manage" });
          } else {
            this.$message.error(res.data[0].log);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.model {
  // .model{
  .getCodeBtn {
    color: $base-font-color;
  }
  .el_form.el-form--label-top {
    /deep/ .el-form-item__label {
      padding: 0;
    }
  }
  /deep/ .el-input-group__append,
  /deep/ .el-input-group__prepend {
    background-color: transparent;
  }
  // }
}
</style>
